<template>
    <div>
        <header>
            <div class="banner">
                <div class="banner_main">
                    <img src="../assets/images/banner1.png" class="banner-pic" alt="" />
                </div>
            </div>
        </header>
        <div class="main__advantage">
            <h3 class="module-title">优质开发商<span class="title-circular"></span>优势</h3>
            <el-row>
                <el-col :span="8">
                    <div class="advantage__item text-center">
                        <img src="../assets/images/advantage1.png" alt=""/>
                        <h5>提升50%竞标成功率</h5>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="advantage__item text-center">
                        <img src="../assets/images/advantage2.png" alt=""/>
                        <h5>减免平台服务费</h5>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="advantage__item text-center">
                        <img src="../assets/images/advantage3.png" alt=""/>
                        <h5>24小时专属客服服务</h5>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="main__privilege">
            <h3>优质开发商<span class="title-circular"></span>特权</h3>
            <p class="subtitle">优质开发商专属四大特权，助您获得更多项目机会，提升技术服务收益以及更多渠道的服务品牌包装推广</p>
            <el-row>
                <el-col :span="6">
                    <div class="privilege__item text-center">
                        <img src="../assets/images/privilege1.jpg" alt="" />
                        <div class="item__text">
                            <h4>专属定制徽章</h4>
                            <p>快速获得需求方认可</p>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="privilege__item text-center">
                        <img src="../assets/images/privilege2.jpg" alt="" />
                        <div class="item__text">
                            <h4>项目优先推荐</h4>
                            <p>优先获得高额项目推荐</p>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="privilege__item text-center">
                        <img src="../assets/images/privilege3.jpg" alt="" />
                        <div class="item__text">
                            <h4>服务返现特权</h4>
                            <p>免除10%-50%服务费</p>
                        </div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="privilege__item text-center">
                        <img src="../assets/images/privilege4.jpg" alt="" />
                        <div class="item__text">
                            <h4>品牌包装推广</h4>
                            <p>快速树立专业品牌</p>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="main__grade">
            <div class="grade__img">
                优质开发商<span class="title-circular"></span>等级
            </div>
            <div class="table-box">
                <el-table :data="tabledata" stripe style="width: 100%">
                    <el-table-column prop="date" label="">
                        <template slot-scope="scope">
                            {{scope.row.title}}{{scope.row.ind}}
                            <img v-if="scope.row.ind == 0" src="../assets/images/grade-1.png" />
                            <img v-if="scope.row.ind == 1" src="../assets/images/grade-2.png" />
                            <img v-if="scope.row.ind == 2" src="../assets/images/grade-3.png" />
                            <img v-if="scope.row.ind == 3" src="../assets/images/grade-4.png" />
                            <img v-if="scope.row.ind == 4" src="../assets/images/grade-5.png" />
                            <!-- <img :src="scope.row.ind == 0 ? '../assets/images/grade-1.png': scope.row.ind == 1 ? '../assets/images/grade-2.png': scope.row.ind == 2 ? '../assets/images/grade-3.png': scope.row.ind == 3 ? '../assets/images/grade-4.png': '../assets/images/grade-5.png'" alt=""> -->
                        </template>
                    </el-table-column>
                    <el-table-column prop="privilege" label="等级特权"></el-table-column>
                    <el-table-column label="申请条件">
                        <template slot-scope="scope">
                            <p v-if="scope.row.condition">{{scope.row.condition}}</p>
                            <p>{{scope.row.conditions}}</p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <p class="graderemarks">备注：如违反平台及优质开发商规则，则取消优质开发商资质。资质取消后再次申请成功，等级将重新 (Lv 1) 进行计算</p>
        </div>

        <div class="main__step">
            <h3>优质开发商<span class="title-circular"></span>流程</h3>
            <div class="step__content clearfix">
                <div class="content__left fl">
                    <div class="content__top">
                        <h4>申请规范</h4>
                        <ul>
                            <li>1.申请人需要拥有开源众包平台账号且已开通个人/企业接包方身份</li>
                            <li>2.申请人需要遵守平台关于优质开发商申请条件，按照平台申请流程完成申请</li>
                        </ul>
                    </div>
                    <div class="content__bottom">
                        <h4>申请条件</h4>
                        <ul class="clearfix">
                            <li><em></em>3年以上工作经验或成熟的公司</li>
                            <li><em></em>具备良好的合作意识和服务意愿</li>
                            <li><em></em>擅长某类项目并拥有相应案例</li>
                            <li><em></em>具备知名公司背景或相关资质证书</li>
                            <li><em></em>拥有已认证的接包权限</li>
                        </ul>
                    </div>
                    
                </div>
                <div class="content__right fl">
                    <div class="right__item clearfix">
                        <img src="../assets/images/step1.png" alt="" />
                        <div class="right__item__text">
                            <h4>完善信息</h4>
                            <p>点击下方“立即加入”按钮进入申请检测页面</p>
                        </div>
                    </div>
                    <div class="right__item2 clearfix">
                        <img class="fl" src="../assets/images/step-img.png" alt="">
                        <div class="text-center">
                            <div class="stepline"></div>
                        </div>
                    </div>
                    <div class="right__item clearfix">
                        <img src="../assets/images/step2.png" alt="" />
                        <div class="right__item__text">
                            <h4>提交申请</h4>
                            <p>保持电话畅通，便于网站方的沟通审核</p>
                        </div>
                    </div>
                    <div class="right__item2 clearfix">
                        <img class="fl" src="../assets/images/step-img.png" alt="">
                        <div class="text-center">
                            <div class="stepline"></div>
                        </div>
                    </div>
                    <div class="right__item clearfix">
                        <img src="../assets/images/step1.png" alt="" />
                        <div class="right__item__text">
                            <h4>正式加入</h4>
                            <p>审核通过，开始体验平台优质开发商特权</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="main__bottom text-center">
            <el-button type="primary" class="bottom__a">即刻，免费申请加入</el-button>
            <router-link to="/content/qualitydeveloper" target="_blank" class="rule-link">《开源众包平台优质开发商服务规则》</router-link>
        </div>

    </div>
</template>
<script>
    import '../assets/css/qualityplan.css';
    export default {
        data(){
            return{
                tabledata: [
                    {
                        ind: 0,
                        title: '一星优质开发商',
                        icon: './assets/images/grade-1.png',
                        privilege: '免除 10% 服务费',
                        condition: '',
                        conditions: '符合基本资质要求或众包信用要求平台内完成项目好评率100%',
                    },
                    {
                        ind: 1,
                        title: '二星优质开发商',
                        icon: './assets/images/grade-2.png',
                        privilege: '免除 20% 服务费',
                        condition: '已获得一星优质开发商资质',
                        conditions: '完成 2 个及以上项目开发服务且好评率100%',
                    },
                    {
                        ind: 2,
                        title: '三星优质开发商',
                        icon: './assets/images/grade-3.png',
                        privilege: '免除 30% 服务费',
                        condition: '已获得二星优质开发商资质',
                        conditions: '完成 4 个及以上项目开发服务且好评率90%',
                    },
                    {
                        ind: 3,
                        title: '四星优质开发商',
                        icon: './assets/images/grade-4.png',
                        privilege: '免除 40% 服务费',
                        condition: '已获得三星优质开发商资质',
                        conditions: '完成 8 个及以上项目开发服务且好评率90%',
                    },
                    {
                        ind: 4,
                        title: '五星优质开发商',
                        icon: './assets/images/grade-5.png',
                        privilege: '免除 50% 服务费',
                        condition: '已获得四星优质开发商资质',
                        conditions: '完成 16 个及以上项目开发服务且好评率90%',
                    },
                ],
            }
        },
        methods: {
            
        },
        mounted(){
            
        },
    }
    
</script>
